<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="销毁明细详情">
        <template slot="btn">
          <el-button class="filter-item" plain=""  size="small"
                     @click="handleBack">返回
          </el-button>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px">
      <el-form label-width="90px" size="small" label-position="left">
        <item-title title="样品信息" :borderShow="false"/>
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="样品名称：">
              {{form.sample_info.name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样品类别：">
              <span v-if="form.sample_info.sample_type_info">
                {{form.sample_info.sample_type_info.same_type_name	}}
              </span>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样品批号：">
              <span v-if="form.sample_info"> {{handlBatch(form.sample_info.batch_info)}}</span>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="样品规格：">-->
<!--              {{form.sample_info.attr}}-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <item-title title="销毁明细" :borderShow="false"/>
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="销毁单据：">
              {{form.destroy_no}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人：">
              {{form.creator_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <span v-if="form.created_at">{{dateFormat1('yyyy-mm-dd ',form.created_at)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁人：">
              {{form.destroy_user_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="监督人：">
              {{form.supervision_user_name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁日期：">
              <!-- {{form.destroy_time}} -->
               <span v-if="form.destroy_time"> {{dateFormat1('yyyy-mm-dd ',form.destroy_time)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁数量：">
              {{form.destroy_num}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁原因：">
              {{form.reason}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销毁方式：">
              {{form.destroy_way}}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" label-width="100px">
              <file-preview :file-list="form.enclosure" :fileBtnOption="['preview']"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
  import { destroyDetail } from '@/api/sampleManagement'

  export default {
    name: 'particular',
    data() {
      return {
        options: [
          { value: -1, label: '全部' },
          { value: 0, label: '审批中' },
          { value: 1, label: '已拒绝' },
          { value: 2, label: '待销毁' },
          { value: 3, label: '销毁确认' },
          { value: 4, label: '已销毁' },
          { value: 5, label: '已撤销' },
          { value: 6, label: '已回退' },
        ],
        form: {
          sample_info: {}
        }
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {
      handlStatus() {
        return function(val) {
          let a = ''
          this.options.forEach(element => {
            if (val === element.value) {
              a = element.label
            }
          })
          return a
        }

      },
      handlBatch() {
        return function(val) {
          let str = ''
          if (val) {
            for (let i = 0; i < val.length; i++) {
              str += val[i].sample_batch
              if (i !== val.length - 1) {
                str = str + '、'
              }
            }
          }
          return str
        }
      }
    },

    //属性是手动定义的所需监听的值
    watch: {},

    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.handlDestroyDetail()
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //返回
      handleBack() {
        this.$route.params.refresh = true;
        this.$router.go(-1)
      },

      //获取详情数据
      handlDestroyDetail() {
        destroyDetail(this.$route.query.id).then(res => {
          if (res.code === 200) {
            this.form = res.data
          }
        })
      }
    }

  }

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
